<template>
  <div>
    <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="waitMyCheck">待我处理</el-menu-item>
      <el-menu-item index="myCheckList">我收到的</el-menu-item>
      <el-menu-item index="myCreateList">我创建的</el-menu-item>
      <el-menu-item index="department" v-if="departmentAfterSales">部门</el-menu-item>
      <el-menu-item index="all" v-if="allAfterSales">全部</el-menu-item>
    </el-menu>
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="120px">
        <el-form-item label="创建日期：">
          <el-date-picker
            v-model="listQuery.applyTime"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-select
            clearable
            v-model="listQuery.customerId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod1"
            :loading="customerLoading">
            <el-option
              v-for="item in customerList"
              :key="item.customerId"
              :label="item.customerName"
              :value="item.customerId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销售员：">
          <el-cascader
            size="mini"
            collapse-tags
            :show-all-levels="false"
            v-model="listQuery.applyUserId"
            placeholder="请选择部门/事业部/人员"
            :options="userList"
            :props="props"></el-cascader>
        </el-form-item>
        <el-form-item label="售后类型：">
          <el-select v-model="listQuery.applyReason"  placeholder="请选择" clearable>
            <el-option :value="item" :label="item" :key="item" v-for="item in option3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="紧急程度：">
          <el-select v-model="listQuery.urgencyType"  placeholder="请选择" clearable>
            <el-option key="1" label="紧急" value="紧急"></el-option>
            <el-option key="0" label="普通" value="普通"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批状态：">
          <el-select v-model="listQuery.applyState"  placeholder="请选择" clearable>
            <el-option :label="item.label" :value="item.value" v-for="item in stateList" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联订单：">
          <el-input v-model="listQuery.orderSn" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
          <el-button
            @click="showAfter('售后')"
            type="primary">
            新增售后
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--数据列表-->
    <div class="table-container">
      <el-table
        :header-cell-style="{ textAlign: 'center' }"
        v-loading="listLoading"
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
          label="申请编号"
          min-width="150"
          align="center">
          <template slot-scope="scope">
            {{scope.row.applySn}}
          </template>
        </el-table-column>
        <el-table-column
          label="客户名称"
          min-width="200"
          align="center">
          <template slot-scope="scope">
            {{scope.row.customerName}}
          </template>
        </el-table-column>
        <el-table-column
          label="销售员"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.applyUserName}}
          </template>
        </el-table-column>
        <el-table-column
          label="售后类型"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.applyReason}}
          </template>
        </el-table-column>
        <el-table-column
          label="关联订单"
          min-width="150"
          align="center">
          <template slot-scope="scope">
            {{scope.row.orderSn}}
          </template>
        </el-table-column>
        <el-table-column
          label="售后内容"
          min-width="200"
          align="center">
          <template slot-scope="scope">
            {{scope.row.applyRemark}}
          </template>
        </el-table-column>
        <el-table-column
          label="关联金额"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.relationAmount}}
          </template>
        </el-table-column>
        <el-table-column
          label="责任归属"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.dutyParty}}
          </template>
        </el-table-column>
        <el-table-column
          label="处理方案"
          min-width="200"
          align="center">
          <template slot-scope="scope">
            {{scope.row.handleType}}
          </template>
        </el-table-column>
        <el-table-column
          label="补偿金额"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.payAmount}}
          </template>
        </el-table-column>
        <el-table-column
          label="紧急程度"
          min-width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.urgencyType}}
          </template>
        </el-table-column>
        <el-table-column
          label="附件"
          min-width="200"
          align="center">
          <template slot-scope="scope">
            <el-link v-for="item in scope.row.applyFiles" type="primary" :href="item" target="_blank" :key="item">{{item}}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          min-width="150"
          align="center">
          <template slot-scope="scope">
            {{scope.row.applyTime}}
          </template>
        </el-table-column>
        <el-table-column
          label="审批状态"
          min-width="180"
          align="center">
          <template slot-scope="scope">
            {{scope.row.applyStateStr}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          min-width="150"
          align="center">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.isMyCheck==1"  @click="showPop(scope.row)" size="small">审批</el-button>
            <el-button type="text" v-if="scope.row.isCanHandle==1"  @click="showAddSh(scope.row)" size="small">重新提交</el-button>
            <el-button type="text" @click="showLog(scope.row)" size="small">日志</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

    <!--审批-->
    <el-dialog
      :close-on-click-modal="false"
      title="售后审批"
      :visible.sync="dialogVisible"
      width="400px">
      <el-form :model="form" size="mini" label-width="100px" ref="form" :rules="rules">
        <el-form-item label="审批备注：" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="2"></el-input>
          <div>拒绝时备注必需填写</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleConfirm(0)" :loading="btnLoading">拒 绝</el-button>
          <el-button type="primary" @click="handleConfirm(1)" :loading="btnLoading">通 过</el-button>
      </span>
    </el-dialog>
    <!-- 新增售后 -->
    <addSh ref="addSh" @getList="getList"></addSh>
  </div>
</template>
<script>
import {getCustomerOption} from '@/api/partner'
import {getCustomerInfoAPI,afterSaleList,afterSaleProcess} from '@/api/company'
import { purchaseTargetSet,purchaseTargetList } from '@/api/allInLine/goods.js'
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'
import addSh from '@/views/sale/components/addSh'
const defaultListQuery={
  "tab" : "waitMyCheck",
  "customerId" : '',
  "applyTime" : [],
  "applyUserId" : '',
  "applyType":"售后",
  "applyReason" : "",
  "urgencyType" : "",
  "applyState" : "",
  "orderSn" : "",
  "pageNum" : 1,
  "pageSize" : 10
};


const defaultForm={
  "applyId" : '',
  action:'',
  "remark" : "",
}

export default {
  name: "appeal",
  data(){
    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      listLoading: false,
      roles:store.getters.roles ? store.getters.roles : [],
      loading:false,
      count:0,

      props:{multiple: true,label:'value',value:'label',emitPath:false},

      dialogVisible:false,
      form:JSON.parse(JSON.stringify(defaultForm)),
      btnLoading:false,


      rules:{
        remark:[{required: true, message: '此项必填', trigger: 'change'},],
      },

      option3:[],
      customerList:[],
      customerLoading:false,
      stateList:[
        {value:-2,label:'已取消'},
        {value:-1,label:'审批不通过'},
        {value:0,label:'待部门负责人确认'},
        {value:10,label:'待产品线负责人确认'},
        {value:20,label:'待采购部门负责人确认'},
        {value:30,label:'待物流部门负责人确认'},
        {value:40,label:'待总经理确认'},
        {value:50,label:'待财务部门负责人确认'},
        {value:100,label:'确认完成'},
      ]
    }
  },
  props: {
    userList:{
      type: Array,
      default: () => []
    },
  },
  components:{addSh},
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId',
      'isMange',
    ]),
    allAfterSales(){
      if(this.roles.indexOf("allAfterSales") != -1){
        return true
      }else{
        return false
      }
    },
    departmentAfterSales(){
      if(this.roles.indexOf("departmentAfterSales") != -1){
        return true
      }else{
        return false
      }
    },

  },
  created() {
    this.getOptionList()
    this.getList()
  },
  filters: {



  },
  methods:{
    // 新增售后
    showAfter(type){
      // let data = {
      //   customerId:item.customerId,
      //   customerName:item.customerName,
      //   orderId:item.orderId,
      //   orderSn: item.orderSn
      // }
      this.$refs.addSh.showPop(null,type)
    },
    showLog(item){
      this.$emit('showLog',item)
    },
    handleSelect(key){
      this.listQuery.tab = key
      this.handleSearchList()
    },
    showAddSh(item){
      this.$refs.addSh.showPop(item)
    },
    //获取客户列表
    remoteMethod1(query) {
      if(query && query!= ''){
        this.customerLoading = true;
        getCustomerOption({keywords:query}).then(response => {
          this.customerList = response;
          this.customerLoading = false;
        }).catch(()=>{
          this.customerLoading = false;
        });
      }
    },
    //获取下拉项选
    getOptionList(){
      //售后类型
      getCustomerInfoAPI({tab:14}).then((res)=>{
        this.option3 = res
      })

    },
    showPop(item){
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(defaultForm));
      this.form.applyId = item.applyId
        if(item.applyState == 0){
          this.form.action = 'departUserCheck'
        }else if(item.applyState == 10){
          this.form.action = 'pChargeUserCheck'
        }else if(item.applyState == 20){
          this.form.action = 'pDepartUserCheck'
        }else if(item.applyState == 30){
          this.form.action = 'lDepartUserCheck'
        }else if(item.applyState == 40){
          this.form.action = 'bossCheck'
        }else if(item.applyState == 50){
          this.form.action = 'financeUserCheck'
        }

    },

    handleClose(){
      this.dialogVisible = false;
    },
    handleConfirm(type){
      let data = JSON.parse(JSON.stringify(this.form));
      if(type == 1){
        this.submit(data)
      }else{ //拒绝
        this.$refs.form.validate((valid) => {
          if (valid) {
            data.action = 'refuseCheck'
            this.submit(data)
          }
        })
      }

    },
    submit(data){
      this.btnLoading = true;
      afterSaleProcess(data).then((res)=>{
        this.btnLoading = false;
        this.handleClose();
        this.getList();
      }).catch(()=>{
        this.btnLoading = false;
      })
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取列表
    getList() {
      this.listLoading = true;
      let pa = JSON.parse(JSON.stringify(this.listQuery))
      afterSaleList(pa).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },


  },
}
</script>

<style scoped lang="scss">

</style>
